<canvas id="test" width="800" height="500" style="background: #eee;"></canvas>

<script>
  /** @type {HTMLCanvasElement} */
  const canvas = document.getElementById('test')
  const context = canvas.getContext('2d')

  // 标题
  context.font = '20px 宋体'
  context.fillText('canvas柱状图', 50, 50)

  // 水平标记线
  context.moveTo(100, 100)
  context.lineTo(700, 100)

  context.moveTo(100, 160)
  context.lineTo(700, 160)

  context.moveTo(100, 220)
  context.lineTo(700, 220)

  context.moveTo(100, 280)
  context.lineTo(700, 280)

  context.moveTo(100, 340)
  context.lineTo(700, 340)

  context.strokeStyle = 'rgba(0, 0, 0, 0.3)'
  context.stroke()

 
  context.beginPath()
  // 轴线
  context.moveTo(100, 100);
  context.lineTo(100, 400);
  context.lineTo(700, 400);

  context.font = '12px 宋体'
  context.textAlign = 'right'
  // y轴刻度线和文本
  context.moveTo(100, 100)
  context.lineTo(92, 100)
  context.fillText('150', 90, 104)

  context.moveTo(100, 160)
  context.lineTo(92, 160)
  context.fillText('120', 88, 164)

  context.moveTo(100, 220)
  context.lineTo(92, 220)
  context.fillText('90', 88, 224)

  context.moveTo(100, 280)
  context.lineTo(92, 280)
  context.fillText('60', 88, 284)

  context.moveTo(100, 340)
  context.lineTo(92, 340)
  context.fillText('30', 88, 344)

  context.moveTo(100, 400)
  context.lineTo(92, 400)
  context.fillText('0', 88, 404)

  // x轴刻度线和文本
  context.textAlign = 'center'

  context.moveTo(100, 400)
  context.lineTo(100, 408)
  context.fillText('食品', 175, 415)

  context.moveTo(250, 400)
  context.lineTo(250, 408)
  context.fillText('数码', 325, 415)

  context.moveTo(400, 400)
  context.lineTo(400, 408)
  context.fillText('服饰', 475, 415)

  context.moveTo(550, 400)
  context.lineTo(550, 408)
  context.fillText('箱包', 625, 415)

  context.moveTo(700, 400)
  context.lineTo(700, 408)

  // 矩形
  context.fillStyle = 'pink';
  context.fillRect(110, 200, 130, 200);
  context.fillRect(260, 160, 130, 240);
  context.fillRect(410, 220, 130, 180);
  context.fillRect(560, 100, 130, 300);

  context.strokeStyle = '#000'
  context.stroke()
  context.closePath()
</script>